.message-nav {
	height: 100%;
	width: 13rem;
	z-index: 1;
	background: var(--color-nav-bg);
	overflow-y: auto;

	.nav {
		.active {
			color: var(--color-nav-text-active);
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 3rem;
			padding-right: 0.5rem;
			height: 3.5rem;
			line-height: 1;
			cursor: pointer;
			color: var(--color-nav-text);
			user-select: none;
			text-decoration: none;

			&:hover {
				background: var(--color-nav-bg-hover);
			}

			&.active {
				background: var(--color-nav-bg-hover);
				color: var(--color-nav-text-active);
			}
		}

		.parent-nav {
			padding-left: 2rem;
		}
	}
}
